Css

[Solved] Autocomplet textbox not working it is not showing suggestion List

[Solved] Autocomplet textbox not working it is not showing suggestion List , someone asked me to explain?
By:

I already referenced jquery ui css even though it is not showing the suggestion List. I checked everything fine lately I find the problem on some other css. Without affecting that I resolved it by applying following style.

<style type="text/css">
    .ui-autocomplete {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        float: left;
        display: none;
        min-width: 160px;
        padding: 4px 0;
        margin: 0 0 10px 25px;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }
 
    .ui-menu-item > a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }
 
    .ui-state-hover, .ui-state-active {
        color: #ffffff;
       text-decoration: none;
       background-color: #0088cc;
        border-radius: 0px;
       -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }
</style>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
       
        $("#txtCategory").autocomplete({
 
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("GetCategoryType", "submit", new { area = "" })',
                   data: "{ 'term': '" + request.term+"'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    //dataFilter: function (data) { return data; },
                    success: function (data) {
                       debugger;
                       response($.map(data, function (item) {
                            return { label: item, value1: item };
                        }));
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
 
    });
</script>
<body>

@Html.TextBox("searchTerm", null, new { Class = "form-control input-lg", id = "txtCategory" })
</body> 

 

Related Article

Post your comments / questions



Recent Article